<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="lib/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="app">
			<h4>{{msg}}</h4>
			<!-- v-bind只能实现数据的单项绑定 从vm->v -->
			<input type="text"  v-bind:value="msg" style="width: 100%;" />
			<!--!!!!! v-model实现表单元素和model数据数据双向绑定 -->
			<!-- 注意：只能用于表单元素 -->
			<input type="text"  v-model:value="msg" style="width: 100%;" />
			<!-- 
			 双向绑定原理：
			 <input type="text"  v-bind:value="msg" v-on:input="msg=$event.target.value" />
			 通过v-bind绑定值，再通过事件监听改变进行赋值更新
			 
			 
			 -->
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:'.app',
				data:{
					msg:'爱敲代码爱学习爱思考'
				},
				methods:{}
			})
		</script>
	</body>
</html>
